<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入L7的依赖-->
    <script src='https://unpkg.com/@antv/l7'></script>
    <style>
        #map {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<body>
    <button style="z-index: 999;
position: relative;" onclick="fddt()">放大地图</button>
    <button style="z-index: 999;
position: relative;" onclick="fddt1()">缩小地图</button>
    <div id="map"></div>

</body>
<script>

    console.log("111")
    //实例化场景
    const scene = new L7.Scene({
        //通过id挂载到DOM树
        id: "map",
        map: new L7.GaodeMap({
            style: 'dark',
            center: [114.30, 30.50],
            zoom: 11,
            //视角0-90
            pitch: 90
        }),
        logoVisible: false

    })
    scene.on('loaded', () => {
        const mapTheme = new L7.MapTheme({});
        scene.addControl(mapTheme)
    })
    scene.on('loaded', () => {
        scene.on("click", () => {
            // scene.setMapStyle("normal")
        })
    })
    function fddt() {
        let zoom = scene.getZoom();
        scene.setZoom(zoom + 1)
    }
    function fddt1() {
        let zoom = scene.getZoom();
        scene.setZoom(zoom - 1)

    }
    const data = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "height1": 10,
                    name: "测试1",
                    w: "0"
                },
                "geometry": {
                    "type": "Point",

                    "coordinates": [118.338685, 39.543593]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "height1": 20,
                    name: "测试2",
                    w: "1"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [118.321194, 39.539974]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "height1": 30,
                    name: "测试3",
                    w: "2"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [118.329299, 39.525167]
                }
            }
        ]
    }
    //     scene.on("loaded",()=>{
    //         const pointLayer=new L7.PointLayer({
    //             zIndex:6
    //         }).source(data).color('name',['#739DFF','#61FCBF','#FFDE74', '#FF896F']).shape('name',[ 'cylinder',
    //     'triangleColumn',
    //     'squareColumn']).size("height1",h=>{
    //             return h;
    //         }).active(true)
    //   .animate(true)
    //   scene.addLayer(pointLayer)
    //     })
    scene.on("loaded", () => {
        //点图层
        const point_layer = new L7.PointLayer({});
        //source设置图层数据
        //color设置图层颜色
        //active设置鼠标悬停颜色

        point_layer.source(data).color("#fff").shape("circle").size(
            "height1", h => {
                return h;
            }

        ).style({
            opacity: 0.5,
            strokeWidth: 3
        }).active(true)
            .animate(true)
            ;
        //添加点图层
        scene.addLayer(point_layer)
        point_layer.on("click", evt => {
            console.log(evt)
            let obj = {};
            obj = evt.feature.properties;
            console.log(obj)
            let popup = new L7.Popup({
                lngLat: evt.lngLat,
                html: `<p>${obj.name}</p>`
            })
            scene.addPopup(popup)

        })

    })
    //     scene.on("loaded",()=>{
    //         scene.addImage("weather", "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ");
    // const point_layer=new L7.PointLayer();
    // point_layer.source(data).shape("weather").size(20);
    // scene.addLayer(point_layer)

    //     })
    scene.on("loaded", () => {

        const point_layer = new L7.PointLayer();
        const weather_icon = [
            {
                type: "0-天晴",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ"
            }, {
                type: "1-多云",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ"
            },
            {
                type: "2-小雨",
                url: "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ"
            }
        ]
        weather_icon.forEach((el, index) => {
            scene.addImage(`w${index}`, el.url)
        })

        point_layer.source(data).shape("w", ww => {
            console.log(ww, "wa")
            return `w${ww}`
        }).size(20);
        scene.addLayer(point_layer)
    })
    //线图层
    var data1 = {
        "type": "FeatureCollection",
        "features": [
            {
                type: "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [114.292975, 30.488542],
                        [114.29292, 30.493947],
                        [114.293779, 30.498206],
                        [114.299404, 30.498046],
                        [114.302326, 30.497993]
                    ]
                }
            }
        ]

    }
    scene.on("loaded", () => {
        const linelayer = new L7.LineLayer();
        linelayer.source(data1).shape("line").size(2).color("#fff");
        scene.addLayer(linelayer)

    })
    scene.on("loaded", () => {
        $.ajax({
            url: "http://39.103.151.139:8000/gis/china"
        }).then(data => {
            console.log("111")
            console.log(data)
            const linelayer = new L7.LineLayer();
            linelayer.source(data).shape("line").size(2).color("#fff");
            scene.addLayer(linelayer)
        })
    })
    scene.on("loaded",()=>{
        $.ajax({
            url:"./world_country.json"
        }).then(res=>{
            const linelayer = new L7.LineLayer();
            linelayer.source(res).shape("line").size(2).color("#e5e5e5");
            scene.addLayer(linelayer)
            
        })
    })
    //线动画
    scene.on("loaded", () => {
        const linelayer = new L7.LineLayer({
            blend:'normal'
        });
        linelayer.source(data1).shape("arc3d").size(2).color("#f92bc1").animate({
            //流线长度
            trailLength:1,
            //间隔
            interval:0.1,
            //每段轨迹执行时间
            duration:1
        });
        scene.addLayer(linelayer)

    })
    //轨迹动画
    var data3 = {
  "type": "FeatureCollection",
  "features": [
    {
      type: "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [114.292975, 30.488542],
          [90, 30]
        ]
      }
    }
  ]

}
scene.addImage(
  'plane',
  'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
);
scene.on('loaded',()=>{
    const layer=new L7.LineLayer({
        blend:"normal"
    }).source(data3).shape("arc").size(2).color('#ff2d51')
    scene.addLayer(layer)
    const planeLineLayer = new L7.LineLayer({
    blend: 'normal',
    name: "飞机"
  })
    .source(data3)
    .color('#ff6b34')
    .texture('plane')
    .shape('arc')
    .size(15)
    .animate({
      duration: 1,
      interval: 0.2,
      trailLength: 0.05
    })
    .style({
      textureBlend: 'replace',
      lineTexture: true, // 开启线的贴图功能
      iconStep: 10, // 设置贴图纹理的间距
    });
  scene.addLayer(planeLineLayer);
})
</script>

</html>